<template>
	<view class="content">
		<navTop :title="navtop.title" :tipsShow="false"></navTop>
		<view class="content-top">
			<!-- <view class="content-top__title">
				<view class="content-top__item" :class="{'active' : active == i }" v-for="(v, i) in titleList" @click="changeModel(v, i)">
					{{v.name}}
				</view>
			</view> -->
		</view>
		<view class="view-top">
			<image :src="banner" mode="" class="view-top__img"></image>
		</view>
		<view class="view-content" :style="{marginTop: barHeight + 'px'}">
			<view class="view-content__item" v-for="(v, i) in contentList" :key="i">
				<view class="view-content__title">
					{{v.title}}
				</view>
				<view class="view-content__text">
					{{v.info}}
				</view>
				<view class="view-contet__list">
					<view class="view-contet__list-item" v-for="(item, index) in v.list" :key="index" @click="gotoPage">
						<view class="flex-l">
							<image :src="item.img" mode="" class="view-contet__list-img"></image>
							<text class="view-contet__list-text">{{item.info}}</text>
						</view>
						<image :src="'/static/v-down.png'" mode="" class="view-contet__list-right"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="send-btn">
			<image :src="send" mode="" class="send-btn__img"></image>
		</view>
		<customTarbar :selectIndex="2" />
	</view>
</template>
<script>
import navTop from '@/components/nav-title.vue';
import customTarbar from '@/components/custom-tarbar.vue';

import banner from '@/static/v-banner.png'
import vy from '@/static/v-y.png'
import vDown from '@/static/v-down.png'
import send from '@/static/visa-link.png'

	export default {
		components: {
			navTop,
			customTarbar
		},
		data() {
			return {
				banner,
				vy,
				vDown,
				send,
				barHeight: 0,
				active: 0,
				navtop: {
					title: ' ',
					color: '#fff'
				},
				contentList: [
					{
						title: 'Welcome to Longhua',
						info: 'Services',
						list: [
							{
								img: '/static/visa-6.png',
								info: "Foreigner's Work Permit",
								url: ''
							},
							{
								img: '/static/b-1.png',
								info: 'Dog-Raising Initial Registration',
								url: ''
							},
							{
								img: '/static/visa-1.png',
								info: 'Migrant Population Registration',
								url: ''
							},
							{
								img: '/static/b-2.png',
								info: 'the Establishment, Change and Cancellation of Foreign-Invested Limited Company',
								url: ''
							},
							{
								img: '/static/visa-4.png',
								info: 'Archival Filing and Registration of Foreign Trade Business Operators',
								url: ''
							},
							{
								img: '/static/b-3.png',
								info: 'Residence Registration',
								url: ''
							},
							{
								img: '/static/visa-5.png',
								info: 'Visa Application',
								url: ''
							},
						]
					}
				]
			}
		},
		onLoad() {

		},
		created() {
			this.isBarHeight999().then((statusBarHeight)=>{
				this.barHeight = -(statusBarHeight + 145)
			})
		},
		methods: {
			gotoPage(v, i) {
				uni.navigateTo({
					url: '/pages/visa/visa-next'
				})
			}
		}
	}
</script>

<style lang="less">
.flex-l {
	display: flex;
	justify-content: left;
	align-items: center;
	height: 100%;
}
.content {
	min-height: 100vh;
	background-color: #0078FF;
}
.view-top {
	position: relative;
	.view-top__img {
		width: 100vw;
	}
	.view-top__title {
		position: absolute;
		left: 30rpx;
		top: 176rpx;
		font-size: 64rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
	}
	.view-top__nav{
		position: absolute;
		top: 346rpx;
		left: 30rpx;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		.view-top__item {
			margin-right: 40rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			height: 66rpx;
			position: relative;
		}
		.active::after {
			content: ' ';
			width: 48rpx;
			height: 4rpx;
			background: #FFFFFF;
			border-radius: 2px;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translate(-50%, 0);
		}
	}
}

.view-content {
	position: relative;
	z-index: 9;
	padding: 100rpx 30rpx 150rpx;
	.view-content__item {
		// background: #FFFFFF;
		// box-shadow: 0px 4px 12px 0px rgba(55, 58, 64, 0.08);
		border-radius: 4px;
		// padding: 60rpx;
		margin-bottom: 40rpx;
	}
	.view-content__title {
		font-size: 40rpx;
		font-family: Helvetica-Bold, Helvetica;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 48rpx;
		margin-bottom: 16rpx;
	}
	.view-content__text {
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.85);
		line-height: 40rpx;
		margin-bottom: 32rpx;
	}
	.view-contet__list {
		box-shadow: 0px 4px 12px 0px rgba(55, 58, 64, 0.08);
		border-radius: 8rpx;
	}
	.view-contet__list-item {
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 120rpx;
		padding: 12rpx 40rpx;
		margin-bottom: 24rpx;box-shadow: 0px 4px 12px 0px rgba(55, 58, 64, 0.08);
		border-radius: 4px;
	}
	.view-contet__list-img {
		width: 48rpx;
		height: 48rpx;
		margin-right: 20rpx;
	}
	.view-contet__list-text {
		width: 490rpx;
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #1F1F1F;
	}
	.view-contet__list-right { 
		width: 32rpx;
		height: 32rpx;
	}
}
.view-content__box {
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #1F1F1F;
	line-height: 44rpx;
	.line {
		margin-bottom: 30rpx;
	}
}
.view-content__list {
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #1F1F1F;
	.view-content__line {
		height: 72rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background: linear-gradient(270deg, rgba(0, 120, 255, 0.05) 0%, rgba(0, 116, 255, 0.1) 100%);
		border-radius: 8rpx;
		margin-bottom: 20rpx;
		padding: 14rpx 24rpx;
	}
	.view-list__img {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
}
.view-content__btns {
	border-top: 1px dashed #0078FF;
	position: relative;
	.view-content__b {
		position: absolute;
		left: 0;
		top: 0;
		background-color: #fff;
		width: 40rpx;
		height: 40rpx;
		.box {
			position: absolute;
			left: 0;
			top: 0;
			background-color: #0078FF;
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			transform: translate(-56rpx, -50%);
		}
	}
	.view-content__r {
		position: absolute;
		right: 0;
		top: 0;
		background-color: #fff;
		width: 40rpx;
		height: 40rpx;
		.box {
			position: absolute;
			right: 0;
			top: 0;
			background-color: #0078FF;
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			transform: translate(56rpx, -50%);
		}
	}
}
.view-btns {
	text-align: center;
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #0078FF;
	.view-goto__btn{
		display: inline-block;
		width: 610rpx;
		height: 88rpx;
		line-height: 88rpx;
		background: #0078FF;
		border-radius: 56rpx;
		margin: 40rpx 0;
		text-align: center;
	font-size: 32rpx;
		color: #FFFFFF;
	}
	.view-goto__img {
		width: 32rpx;
		height: 32rpx;
		margin-top: 8rpx;
		transform: rotate(90deg);
	}
}

.send-btn{
	width: 88rpx;
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, #6EE6BB 0%, #0AAE73 100%);
	box-shadow: 0px 4px 16px 0px rgba(10, 174, 115, 0.25);
	border-radius: 50%;
	position: fixed;
	right: 30rpx;
	bottom: 160rpx;
	z-index: 99999;
	.send-btn__img {
		width: 32rpx;
		height:32rpx
	}
}
</style>
